(function($) {
Drupal.yw = Drupal.yw || {};
Drupal.behaviors.yw = {
  attach: function(context, settings) {
    // Initialize drag-and-drop.
    $('.yw-container').each(function() {
      var container = $(this);
      container.not('.ui-sortable').sortable({
        forcePlaceholderSize: true,
        revert: true,
        cursor: 'move',
        cursorAt: {left: 0, top:0},
        dropOnEmpty: true,
        items: '> div.letter',
        tolerance: 'pointer',
        start: function(event, ui) {Drupal.yw.startDrawer()},
        stop: function(event, ui) {Drupal.yw.stopDrawer()},
        over: function(event, ui) {},
        sort: function(event, ui) {},
        update: function(event, ui) {}
      });
    });
    // Second pass, hook up all regions via connectWith to each other.
    $('.yw-container').each(function() {
      $(this).sortable('option', 'connectWith', ['.ui-sortable']);
    });
  }
}
Drupal.yw.startDrawer = function() {
  $('.yw-container:has(div.letter)').removeClass('ui-sortable');
}
Drupal.yw.stopDrawer = function() {
  $('.yw-container:not(.ui-sortable)').addClass('ui-sortable');
}
})(jQuery);